<!DOCTYPE HTML>
<html>
<head>
	<title>pixi.js example 3 using a movieclip</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #000000;
		}
	</style>
	<script src="../../bin/pixi.dev.js"></script>
</head>
<body>
	<script>
	// create an array of assets to load
	var assetsToLoader = [ "SpriteSheet.json"];

	// create a new loader
	loader = new PIXI.AssetLoader(assetsToLoader);

	// use callback
	loader.onComplete = onAssetsLoaded

	//begin load
	loader.load();

	// holder to store aliens
	var explosions = [];

	var count = 0;

	// create an new instance of a pixi stage
	var stage = new PIXI.Stage(0xFFFFFF);

	// create a renderer instance.
	renderer = PIXI.autoDetectRenderer(800, 600);

	// add the renderer view element to the DOM
	document.body.appendChild(renderer.view);

	function onAssetsLoaded()
	{
		// create an array to store the textures
		var explosionTextures = [];

		for (var i=0; i < 26; i++)
		{
		 	var texture = PIXI.Texture.fromFrame("Explosion_Sequence_A " + (i+1) + ".png");
		 	explosionTextures.push(texture);
		};

		for (var i = 0; i < 50; i++)
		{
			// create an explosion MovieClip
			var explosion = new PIXI.MovieClip(explosionTextures);

			explosion.position.x = Math.random() * 800;
			explosion.position.y = Math.random() * 600;
			explosion.anchor.x = 0.5;
			explosion.anchor.y = 0.5;

			explosion.rotation = Math.random() * Math.PI;
			explosion.scale.x = explosion.scale.y = 0.75 + Math.random() * 0.5;

			explosion.gotoAndPlay(Math.random() * 27);

			stage.addChild(explosion);
		}

		// start animating
		requestAnimFrame( animate );
	}

	function animate() {
	    renderer.render(stage);

	    requestAnimFrame(animate);
	}
	</script>

	</body>
</html>
